<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
            /* 设置网格行与列之间的间隙 */
            gap: 30px;
            background-color: #1d2b3a;
        }
        .inputBox{
            position: relative;
            width: 250px;
        }
        .inputBox input{
            width: inherit;
            padding: 20px;
            border: 1px solid rgba(255,255,255,0.25);
            background-color: #1d2b3a;
            border-radius: 5px;
            color: #fff;
            /* 设置元素周围的轮廓 */
            outline: none;
            font-size: 1em;
        }
        .inputBox span{
            position:absolute;
            left:0;
            padding: 18px;
            /* 设置元素是否对指针事件做出反应 */
            pointer-events: none;
            font-size: 1em;
            color:rgba(255,255,255,0.25) ;
            /* 转为大写 */
            text-transform: uppercase;
            transition: 0.5s;
        }
        /* :valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式 */
        .inputBox input:valid ~ span,
        .inputBox input:focus ~ span{
            color:#00dfc4;
            transform:translate(5px,-12px);
            padding: 5px;
            font-size: 0.65em;
            background-color: #1d2b3a;
            border:1px solid #00dfc4;
        }
        .inputBox input:valid ,
        .inputBox input:focus {
            border:1px solid #00dfc4;
        }
    </style>
</head>
<body>
    <div class="inputBox">
        <input type="text" required="required">
        <span>账号</span>
    </div>
    <div class="inputBox">
        <input type="password" required="required">
        <span>密码</span>
    </div>
    
</body>
</html>